<template>
  <div style="background-color: #fff; ">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="添加商品" name="first" v-if="route.params.Id == undefined">
        <!-- 第一页表单的内容 -->
        <el-form style="overflow: visible; padding-top: 10px;" ref="formRef" :model="Form1" label-width="100px"
          id="demo-ruleForm" v-show="isShow1">
          <el-form-item label="商品分类" style="width: 100%">
            <el-cascader v-model="Form1.good_ShangPinFenNei" :options="options" clearable />
          </el-form-item>
          <el-form-item label="商品名称" style="width: 50%">
            <el-input v-model="Form1.good_Name" placeholder="商品名称" />
          </el-form-item>
          <el-form-item label="商品库存" style="width: 50%">
            <el-input-number v-model="Form1.good_KuChun" :min="1" :max="1000" @change="handleChange" />
          </el-form-item>
          <el-form-item label="商品价格" style="width: 50%">
            <el-input v-model="Form1.good_ShangPinJiaGe" placeholder="商品价格" />
          </el-form-item>
          <el-form-item label="兑换积分" style="width: 50%">
            <el-input v-model="Form1.good_DuiHuanJiFen" placeholder="兑换积分" />
          </el-form-item>
          <el-form-item label="商品规格" style="width: 50%">
            <el-radio-group v-model="radio1" size="large" @change="changeGuige">
              <el-radio-button label="规格1" />
              <el-radio-button label="规格2" />
              <el-radio-button label="规格3" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="市场价格" style="width: 50%">
            <el-input v-model="Form1.good_ShiChangJiaGe" placeholder="市场价格" />
          </el-form-item>
          <el-form-item label="库存预警" style="width: 50%">
            <el-input v-model="Form1.good_KuCunYuJing" placeholder="库存预警" />
          </el-form-item>
          <el-form-item label="上传图片" style="width: 50%">
            <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
              :file-list="fileList" v-model="Form1.good_ImgUrl" :on-success="handleAvatarSuccess"
              action="http://localhost:3001/upload1" name="aaa" multiple="true">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品描述" style="width: 50%">
            <el-input v-model="Form1.good_ShangPinMiaoShu" type="textarea" />
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-switch v-model="value1" />
          </el-form-item>
          <el-form-item label="物流运费" style="width: 50%">
            <el-input v-model="Form1.good_YunFei" placeholder="0" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1()">下一页</el-button>
          </el-form-item>
        </el-form>
        <!-- </el-tab-pane> -->

        <!-- 下一页的内容 -->
        <!-- <el-tab-pane label="" name="third"> -->
        <div v-show="isShow2" class="xiayiye">
          <el-radio-group v-model="data.radio2" class="ml-4" @change="changeState">
            <el-radio label="1" size="large">不参与</el-radio>
            <el-radio label="2" size="large">特价</el-radio>
            <el-radio label="3" size="large">爆款退换</el-radio>
          </el-radio-group>
          <el-form ref="formRef" :model="Form2" label-width="100px" class="demo-ruleForm" v-if="data.radio2 == 2">
            <el-form-item label="特价金额" style="width: 50%">
              <el-input v-model="Form2.teJia_JinE" placeholder="特价金额" />
            </el-form-item>
            <el-form-item label="特价积分" style="width: 50%">
              <el-input v-model="Form2.teJia_JiFen" placeholder="特价积分" />
            </el-form-item>
            <el-form-item label="活动时间" style="width: 50%">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="value2" type="daterange" unlink-panels="true" range-separator="To"
                  start-placeholder="起始时间" end-placeholder="结束时间" :shortcuts="shortcuts" @change="changeTime"
                  format="YYYY-mm-dd HH:mm:ss" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm2()">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane v-if="route.params.Id != undefined" label="编辑商品列表" name="second">
        <!-- 商品列表的表单编辑修改的内容-->
        <el-form style="overflow: visible; padding-top: 10px;" ref="formRef" :model="Form3" label-width="100px"
          id="demo-ruleForm">
          <el-form-item label="商品ID" style="width: 50%">
            <el-input v-model="Form3.Id" placeholder="商品ID" disabled />
          </el-form-item>
          <el-form-item label="商品名称" style="width: 50%">
            <el-input v-model="Form3.good_Name" placeholder="商品名称" />
          </el-form-item>
          <el-form-item label="商品库存" style="width: 50%">
            <el-input-number v-model="Form3.good_KuChun" :min="1" :max="1000" @change="handleChange" />
          </el-form-item>
          <el-form-item label="商品价格" style="width: 50%">
            <el-input v-model="Form3.good_ShangPinJiaGe" placeholder="商品价格" />
          </el-form-item>
          <el-form-item label="兑换积分" style="width: 50%">
            <el-input v-model="Form3.good_DuiHuanJiFen" placeholder="兑换积分" />
          </el-form-item>
          <el-form-item label="商品编号" style="width: 50%">
            <el-input v-model="Form3.good_Number" placeholder="市场价格" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="valueState" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm3()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import http from '../utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'

// 图片上传引入图标
import { Plus } from '@element-plus/icons-vue'

// 表单1添加商品的内容
const Form1 = reactive({
  good_Name: '',
  good_ShangPinJiaGe: '',
  good_ShiChangJiaGe: '',
  good_KuChun: '',
  good_DuiHuanJiFen: '',
  good_ShangPinFenNei: '',
  good_ShangPinGuiGe: '',
  good_YunFei: '',
  good_ShangPinMiaoShu: '',
  good_ImgUrl: '',
  good_KuCunYuJing: '',
  good_Number: '',
})
//表单2 添加商品折扣的内容
const Form2 = reactive({
  teJia_JinE: '',
  teJia_JiFen: '',
  good_HuoDongKaiShiTime: '',
  good_HuoDongJieShuTime: '',
})


// 查询时间
const value2 = ref('')
const changeTime = (a) => {
  Form2.good_HuoDongKaiShiTime = a[0],
    Form2.good_HuoDongJieShuTime = a[1],
    console.log(a[0], a[1]);
}
const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 下一页
const activeName = ref('first')
let isShow1 = ref(true)
let isShow2 = ref(false)
const submitForm1 = () => {
  console.log(isShow1.value);
  isShow1.value = false
  isShow2.value = true
}

const data = reactive({
  radio2: '1'
})

// 是否推荐
const value1 = ref(false)
// 商品规格
const radio1 = ref('')
const changeGuige = () => {
  console.log(radio1.value);
}

// 商品库存
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
// 商品分类
const options = [
  {
    value: '3C数码',
    label: '3C数码',
    children: [
      {
        value: '手机通信',
        label: '手机通信',
        children: [
          {
            value: '手机',
            label: '手机',
          },
          {
            value: '电脑',
            label: '电脑',
          }
        ],
      },
      {
        value: '手机配件',
        label: '手机配件',
        children: [
          {
            value: '充电宝',
            label: '充电宝',
          },
          {
            value: '耳机',
            label: '耳机',
          },
        ],
      },
    ],
  },
  {
    value: '服饰化妆',
    label: '服饰化妆',
    children: [
      {
        value: '服饰类',
        label: '服饰类',
        children: [
          {
            value: '珍珠手链',
            label: '珍珠手链',
          },
          {
            value: 'Dr戒指',
            label: 'Dr戒指',
          }
        ],
      },
      {
        value: '化妆类',
        label: '化妆类',
        children: [
          {
            value: '口红',
            label: '口红',
          },
          {
            value: '眼影',
            label: '眼影',
          },
        ],
      },
    ],
  },

]
// 商品编辑表单
const route = useRoute()
const valueState = ref(Boolean(Number(route.params.good_ZhuangTai)))
// 表单3
const Form3 = reactive({
  Id: route.params.Id,
  good_Name: route.params.good_Name,
  good_KuChun: route.params.good_KuChun,
  good_ShangPinJiaGe: route.params.good_ShangPinJiaGe,
  good_DuiHuanJiFen: route.params.good_DuiHuanJiFen,
  good_Number: route.params.good_Number,
})
console.log(route.params);
// 修改编辑商品列表 

const submitForm3 = () => {
  ElMessageBox.confirm(
    '是否确定修改?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      http({
        url: '/xgMall',
        method: 'post',
        data: {
          Id: Number(Form3.Id),
          good_Number: Form3.good_Number,
          good_Name: Form3.good_Name,
          good_KuChun: Number(Form3.good_KuChun),
          good_ShangPinJiaGe: Number(Form3.good_ShangPinJiaGe),
          good_DuiHuanJiFen: Number(Form3.good_DuiHuanJiFen),
          good_ZhuangTai: Number(valueState.value),
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          router.push({ path: '/home/klaeManage' })
        }
      })
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
  // alert('是否确定修改')

}
// 图片上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log(response, uploadFile.raw)
  Form1.good_ImgUrl = 'http://localhost:3001/uploads/' + response.path
  console.log(Form1.good_ImgUrl);
}
// 添加商品列表请求
const router = useRouter()
const submitForm2 = () => {
  // 根据当前时间生成订单编号
  let projectTime = new Date() // 当前中国标准时间
  let Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
  let Month = projectTime.getMonth() + 1 // 获取中国区月份
  let Day = projectTime.getDate() // 获取几号
  let CurrentDate = Year
  if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
    CurrentDate += Month
  } else {
    CurrentDate += '0' + Month
  }
  if (Day >= 10) {
    CurrentDate += Day
  } else {
    CurrentDate += '0' + Day
  }
  Form1.good_Number = 'JF' + CurrentDate + Math.floor(Math.random() * 1000)
  console.log(Form1.good_Number);
  // 发起请求
  http({
    url: '/addGoods',
    method: 'post',
    data: {
      good_ZhuangTai: 1,
      good_Number: Form1.good_Number,
      good_KuCunYuJing: Number(Form1.good_KuCunYuJing),
      teJia_JinE: Number(Form2.teJia_JinE),
      teJia_JiFen: Number(Form2.teJia_JiFen),
      good_HuoDongKaiShiTime: Form2.good_HuoDongKaiShiTime,
      good_HuoDongJieShuTime: Form2.good_HuoDongJieShuTime,
      good_ImgUrl: Form1.good_ImgUrl,
      good_Name: Form1.good_Name,
      good_ShangPinJiaGe: Number(Form1.good_ShangPinJiaGe),
      good_ShiChangJiaGe: Number(Form1.good_ShiChangJiaGe),
      good_KuChun: Number(Form1.good_KuChun),
      good_DuiHuanJiFen: Number(Form1.good_DuiHuanJiFen),
      good_ShangPinFenNei: Form1.good_ShangPinFenNei[2],
      good_ShangPinGuiGe: radio1.value,
      good_YunFei: Number(Form1.good_YunFei),
      good_ShangPinMiaoShu: Form1.good_ShangPinMiaoShu,
    },
  }).then(res => {
    console.log(res);
    if (res.data.code == 200) {
      router.push({ path: '/home/klaeManage' })
    }
  })
  ElMessage({
    message: '添加成功',
    type: 'success',
  })
}

</script>

<style  scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>